<template>
    <view class="pages u-skeleton" :class="GlobalThemes.commonBackGroundClass">
        <view class="search-top-box" id="navbar">
            <u-navbar
                :is-back="false"
                back-icon-color="#ffffff"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <text>{{ i18n('index').appName }}</text>
                </view>
                <view class="slot-wrap">
                    <view class="search-wrap">
                        <u-search
                            :placeholder="i18n('search').searchPlaceholder"
                            shape="round"
                            :clearabled="true"
                            :show-action="true"
                            :action-text="i18n('search').searchText"
                            :animation="true"
                            bg-color="#f4f4f5"
                            :action-style="{ color: '#FFFFFF' }"
                            @search="navOnSearch"
                            @custom="navOnSearch"
                            v-model="searchKey"
                            @clear="doClear"
                            :focus="searchFocus"
                        ></u-search>
                    </view>
                </view>
            </u-navbar>
        </view>
        <!-- 搜索前开始 -->
        <view id="header">
            <block v-if="historySearchList.length > 0 && searchList.length <= 0">
                <view class="search-history-box u-skeleton-rect">
                    <view class="search-history-box-top">
                        <view class="search-history-box-left">
                            <text class="search-history-box-left-text">{{ i18n('search').searchHistoryTitleTop }}</text>
                        </view>
                        <view class="search-history-box-right" @click="clearHistorySearchList">
                            <u-icon size="40" name="trash" color="#A1A1A1"></u-icon>
                        </view>
                    </view>
                    <view class="search-history-box-bottom">
                        <scroll-view class="search-history-scroll" scroll-y @scrolltolower="onreachBottom">
                            <view class="search-history-list-box">
                                <block v-for="(item, index) in historySearchList" :key="index">
                                    <view
                                        class="search-history-box-bottom-item u-skeleton-fillet"
                                        @click="onSearch(item.vod_name)"
                                    >
                                        <text class="title">{{ item.vod_name }}</text>
                                    </view>
                                </block>
                            </view>
                        </scroll-view>
                    </view>
                </view>
            </block>
        </view>
        <block v-if="searchList.length <= 0">
            <!-- 搜索发现 -->
            <view class="search-bottom-box">
                <u-tabs-swiper
                    ref="uTabs"
                    :list="tabLists"
                    :current="current"
                    @change="tabsChange"
                    :is-scroll="false"
                    :active-color="typelist[tabIndex].color"
                    swiperWidth="750"
                ></u-tabs-swiper>
                <swiper
                    class="swiper-item"
                    :style="{ height: swpierViewHeight + 'px' }"
                    :current="swiperCurrent"
                    @transition="transition"
                    @animationfinish="animationfinish"
                >
                    <swiper-item v-for="(item, index) in tabLists" :key="index">
                        <scroll-view class="scroll-box" scroll-y @scrolltolower="onreachBottom">
                            <view class="swiper-box-item-box">
                                <block v-if="tabLists[current].list.length <= 0">
                                    <view class="search-history-list-box"><u-empty mode="search"></u-empty></view>
                                </block>
                                <block v-else>
                                    <block v-for="(item, index) in tabLists[current].list" :key="index">
                                        <view class="swiper-content-box" v-if="item.vod_name">
                                            <view class="content-item" @click="goDetail(item.vod_id)">
                                                <text class="">{{ index + 1 }}</text>
                                                <text class="">{{ item.vod_name }}</text>
                                            </view>
                                        </view>
                                        <view class="swiper-content-box" v-else>
                                            <view class="content-item" @click="goDetail(item.vod_id)">
                                                <text class="">{{ i18n('search').nop }}</text>
                                            </view>
                                        </view>
                                    </block>
                                </block>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </swiper>
            </view>
        </block>
        <!-- 搜索前结束 -->
        <!-- 搜索列表开始 -->
        <block v-if="searchList.length > 0">
            <view class="search-list-box">
                <view class="search-list-box-clear" id="search-list-box-clear">
                    <u-sticky>
                        <!-- 只能有一个根元素 -->
                        <view class="sticky">
                            <text>{{ i18n('search').searchResult }}</text>
                            <u-icon name="close" :color="typelist[tabIndex].color" size="28" @click="doClear"></u-icon>
                        </view>
                    </u-sticky>
                </view>
                <view class="search-list-content">
                    <scroll-view
                        class="search-list-scroll"
                        scroll-y
                        @scrolltolower="onreachBottom"
                        :style="{ height: scrollViewHeight + 'px' }"
                    >
                        <block v-for="(item, index) in searchList" :key="index">
                            <view class="search-item">
                                <view class="search-item-img-box">
                                    <u-image
                                        class="search-item-img"
                                        :fade="true"
                                        duration="450"
                                        height="300"
                                        width="230"
                                        :lazy-load="true"
                                        :src="item.vod_pic.search('http') >= 0 ? item.vod_pic : imageUrl + item.vod_pic"
                                    >
                                        <u-loading slot="loading"></u-loading>
                                        <view slot="error" style="font-size: 24rpx;">{{ i18n('search').loadingFail }}</view>
                                    </u-image>
                                </view>
                                <view class="search-item-intro">
                                    <view class="search-item-intro-text">
                                        <text
                                            class="search-item-intro-title-text"
                                            :style="{
                                                color: typelist[tabIndex].color
                                            }"
                                        >
                                            {{ item.vod_name }}
                                        </text>
                                        <text class="search-item-intro-tags">
                                            {{ item.vod_year }} {{ item.vod_class }} {{ item.vod_area }} {{ item.vod_lang }}
                                        </text>
                                        <text class="search-item-intro-intro-text">
                                            {{ i18n('search').actors }}：{{
                                                item.vod_actor.length > 0 ? item.vod_actor : i18n('search').nop
                                            }}
                                        </text>
                                    </view>
                                    <view class="search-item-intro-button">
                                        <u-button
                                            @click="goDetail(item.vod_id)"
                                            size="medium"
                                            type="warning"
                                            :custom-style="{
                                                backgroundColor: typelist[tabIndex].color
                                            }"
                                        >
                                            {{ i18n('search').doPlay }}
                                        </u-button>
                                    </view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                </view>
            </view>
        </block>
        <!-- 搜索列表结束 -->
        <u-tabbar
            id="uTabbar"
            v-model="tarbarObj.tarbarCurrent"
            :list="tarbarObj.tarbarList"
            :border-top="true"
            :mid-button="tarbarObj.midButton"
            bg-color="#fff"
            :inactiveColor="typelist[tabIndex].color"
            :activeColor="tarbarObj.activeColor"
            icon-size="40"
            :height="tarbarObj.height"
            mid-button-size="80"
        ></u-tabbar>
        <!--骨架-->
        <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
        <!-- 加载条 -->
        <w-loading :text="i18n('common').loading" mask="true" click="false" ref="loading"></w-loading>
    </view>
</template>

<script>
import Methods from './methods.js'
export default {
    ...Methods
};
</script>

<style lang="scss">
.pages {
    padding: 0 20upx;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    .search-top-box {
        .mp-name {
            color: #fff;
            padding-left: 40upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .slot-wrap {
            display: flex;
            align-items: center;
            flex: 1;

            .search-wrap {
                flex: 1;
                margin: 0 20upx;
            }
        }
    }

    .search-history-box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: space-between;
        padding: 20upx 20upx;

        .search-history-box-top {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: space-between;
            padding: 10upx 0;

            .search-history-box-left {
                .search-history-box-left-text {
                    color: #a1a1a1;
                }
            }

            .search-history-box-right {
            }
        }

        .search-history-box-bottom {
            display: flex;
            flex-direction: row;
            justify-content: space-start;
            align-items: center;
            flex-wrap: wrap;

            .search-history-scroll {
                height: 100%;

                .search-history-list-box {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                }
            }

            .search-history-box-bottom-item {
                background-color: #f5f7f9;
                padding: 10upx 30upx;
                margin-right: 20upx;
                margin-bottom: 10upx;
                border-radius: 10upx;

                .title {
                    flex-wrap: nowrap;
                    color: #666666;
                }
            }
        }
    }

    .search-bottom-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex: 1 1 auto;

        .swiper-item {
            display: flex;
            flex: 1 1 auto;

            .scroll-box {
                height: 100%;

                .swiper-box-item-box {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: space-between;
                    flex-wrap: wrap;

                    .search-history-list-box {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-evenly;
                        align-items: center;
                        align-content: center;
                        width: 100%;
                        padding-top: 50upx;
                    }

                    .swiper-content-box {
                        width: 49%;

                        .content-item {
                            padding: 20upx 30upx;

                            > text:nth-child(1) {
                                padding-right: 20upx;
                                font-weight: 700;
                            }
                        }
                    }
                }
            }
        }
    }

    .search-list-box {
        .search-list-box-clear {
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: center;
            position: relative;
            .sticky {
                margin-top: 20upx;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 95vw;
                padding: 15upx;
                text-align: center;
                border-radius: 10rpx;
            }
        }
        .search-list-content {
            padding: 20upx 0;

            .search-list-scroll {
                height: 80vh;
            }

            .search-item {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding: 10upx 0;

                .search-item-img-box {
                    padding: 0 20upx;

                    .search-item-img {
                        width: 7rem;
                        height: 9rem;
                        border-radius: 10upx;
                    }
                }

                .search-item-intro {
                    padding: 0 20upx;
                    display: flex;
                    height: 9rem;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: space-around;
                    width: calc(100% - 8rem);

                    .search-item-intro-button {
                        color: #ffffff;
                    }

                    .search-item-intro-text {
                        display: flex;
                        justify-content: flex-start;
                        flex-direction: column;

                        > text:nth-child(2) {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                        }
                        > text:nth-child(3) {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                        }

                        .search-item-intro-title-text {
                            font-size: 30upx;
                            font-weight: 700;
                        }
                    }
                }
            }
        }
    }
}
</style>
